<div class="ngm-theme-dark dark w-[300px] shrink-0 flex flex-col justify-start overflow-auto bg-bluegray-700 text-white p-4 group">
  <div class="w-full flex justify-start items-center mb-4" cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-icon displayDensity="cosy" class="-ml-2 opacity-0 group-hover:opacity-80">drag_indicator</mat-icon>
    <span class="text-lg pointer-events-none">
      {{ 'Story.Template.SaveAsStoryTemplate' | translate: { Default: 'Save as story template' } }}
    </span>
  </div>

  <div class="flex-1">
    <form [formGroup]="formGroup">
      <mat-form-field class="w-full" appearance="fill" color="accent">
        <mat-label>{{ 'Story.Common.Name' | translate: { Default: 'Name' } }}</mat-label>
        <input matInput formControlName="name">
      </mat-form-field>
      <mat-form-field class="w-full" appearance="fill" color="accent">
        <mat-label>{{ 'Story.Common.Description' | translate: { Default: 'Description' } }}</mat-label>
        <textarea matInput formControlName="description"></textarea>
      </mat-form-field>

      <div class="m-2">
        <label for="templateType" class="mr-2">
          {{ 'Story.Template.Type' | translate: { Default: 'Type' } }}
        </label>
        <mat-button-toggle-group name="templateType" formControlName="type" ngmAppearance="outline" color="accent" displayDensity="compact">
          <mat-button-toggle [value]="StoryTemplateType.Theme">
            {{ 'Story.Template.Theme' | translate: { Default: 'Theme'} }}
          </mat-button-toggle>
          <mat-button-toggle [value]="StoryTemplateType.Template">
            {{ 'Story.Template.Template' | translate: { Default: 'Template'} }}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>

      <section class="pac-section p-2 mb-4">
        <mat-checkbox class="pac-checkbox" formControlName="isPublic" labelPosition="before">
          {{ 'Story.Common.Public' | translate: {Default: "Public"} }}
        </mat-checkbox>
      </section>
      
      <pac-tag-editor class="w-full" color="accent" formControlName="tags" [category]="eTagCategoryEnum.STORY"></pac-tag-editor>

    </form>

  </div>

  <div class="flex justify-start">
    <div ngmButtonGroup>
      <button mat-raised-button color="accent" cdkFocusInitial [disabled]="(formGroup.invalid || formGroup.pristine) && !file" (click)="save()">
        <mat-spinner *ngIf="uploading" diameter="20" strokeWidth="2" class="m-2"></mat-spinner>
        <span *ngIf="!uploading">
          {{ 'Story.Common.Save' | translate: { Default: 'Save' } }}
        </span>
      </button>
    </div>
  </div>
</div>

<div class="flex-1 relative flex content-center">
  <img *ngIf="!!imagePreview" [src]="imagePreview" alt="Image Preview" class="object-contain mx-auto h-auto">

  <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
    <input #fileUpload type="file" class="file-input h-0 invisible" accept="image/*" (change)="onFileSelected($event)" (click)="fileUpload.value=null;">
    <label *ngIf="!imagePreview" class="text-base flex p-2">
      {{ 'Story.Template.Preview' | translate: {Default: "Preview"} }}
    </label>

    <div class="flex flex-col justify-center items-center backdrop-blur-md bg-white/10 rounded-lg p-4">
      <div class="flex justify-center items-center">
        <button mat-stroked-button ngmAppearance="dashed" displayDensity="cosy" color="accent" (click)="fileUpload.click()">
          <div class="flex justify-start items-center">
            <mat-icon fontSet="material-icons-round">upload</mat-icon>
            <span *ngIf="!!imagePreview">
              {{ 'Story.Common.ReUpload' | translate: {Default: "Re-upload"} }}
            </span>
            <span *ngIf="!imagePreview">
              {{ 'Story.Common.Upload' | translate: {Default: "Upload"} }}
            </span>
          </div>
        </button>
        
        <button *ngIf="imagePreview" mat-icon-button displayDensity="cosy" ngmAppearance="danger" (click)="deletePreview()">
          <mat-icon >delete_forever</mat-icon>
        </button>
      </div>
      
      <mat-error *ngIf="error">
        {{error}}
      </mat-error>
    </div>
  </div>
</div>
